<template>
  
  <view class="small-circle-box-wrapper" :style="[adsStyle,outStyle,
  {
    backgroundImage:'url('+boxBg+')'
  }]" @click="clickHandle">
    <view class="small-circle-box" :style="[innerStyle]">
      <view class="circle-box-text">
        <view>{{str}}</view>
        <view>{{obj.healthType || '???'}}</view>
      </view>
      
      <view class="show-more-tip" v-if="useTip == 'Y'">
        <image class="img" :src="staticImgs.tipImg" mode=""></image>
      </view>
    </view>
  </view>
    
</template>

<script>
  export default{
    props:{
      adsStyle:{
        type: Object,
        default:()=>({})
      },
      useTip:{
        type:String,
        default:'N'
      },
      str:{
        type:String,
        default:""
      },
      subStr:{
        type:String,
        default:""
      },
      outSty:{
        type: Object,
        default:()=>({
          width: '140rpx',
          height: '140rpx'
        })
      },
      innerSty:{
        type: Object,
        default:()=>({
          width: '114rpx',
          height: '114rpx'
        })
      },
      status:{
        type:[String,Number],
        default:""
      },
      obj:{
        type: Object,
        default:()=>({})
      }
    },
    computed: {
      innerStyle(){
        return {
          ...{
            width: '114rpx',
            height: '114rpx'
          },
          ...this.innerSty,
        }
      },
      outStyle(){
        return {
          ...{
            width: '140rpx',
            height: '140rpx'
          },
          ...this.outSty,
        }
      },
      boxBg(){
        let status = this.status
        if(status == 1){
          return this.staticImgs.ok
        }else if(status == 2){
          return this.staticImgs.err
        }else{
          return this.staticImgs.def
        }
      }
    },
    watch:{
      absStyle:{
        handler(val){
          this.done = false 
          this.$nextTick(()=>{
            this.done = true
          })
          console.log(val,'====================watch - val')
        },
        immediate:true
      }
    },
    data(){
      return {
        done:true,
        staticImgs:{
          def:this.imgBaseURL + '/scl/checkup-mental/b-def.png',
          ok:this.imgBaseURL + '/scl/checkup-mental/b-ok-v2.png',
          err:this.imgBaseURL + '/scl/checkup-mental/b-err.png',
          tipImg:this.imgBaseURL + '/scl/checkup-mental/priority-tip.png',
        }
        //  v-for="(item,index) in boxLabelArr"
        // boxLabelArr:['焦虑','压力','敏感','人际交往','抑郁']
      }
    },
    methods:{
      clickHandle(){
        this.$emit('cusClick')
      }
    }
    
  }
</script>

<style lang="scss" scoped>
  @keyframes move {
      from{
          transform: translateY(0) scale(1);
      }
      50% {
        transform: translateY(-10px) scale(0.86);
      }
      to{
          transform: translateY(0) scale(1);
      }
  }
  
  .small-circle-box-wrapper{
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    
    
    
    z-index: 0;
    box-sizing: border-box;
    
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    // background-color: #fff;
    
    animation: move 5s infinite ease-out;

    
    .small-circle-box{
      
      // background: linear-gradient(180deg, rgba(140, 225, 255, .7) 0%, rgba(212, 255, 228, .7) 100%);

      // box-shadow: 0rpx 2rpx 24rpx 0rpx #96DEF7;
      
      
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 26rpx;
      color: #326876;
      text-align: center;
      font-style: normal;
      border-radius: 100%;
      position: relative;
      
      .circle-box-text{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        word-break: keep-all;
      }
      
      .show-more-tip{
        position: absolute;
            left: -24rpx;
            top: -62rpx;
        width: 230rpx;
        height: 74rpx;
        .img{
          width: 100%;
          height: 100%;
        }
      }
      
    }
    
    
  }
  
  
</style>